.flex {
  display: flex;
}

.flex-warp {
  @extend .flex;

  flex-wrap: wrap;
}

.flex-sub,
.flex-1 {
  flex: 1;
}

.flex-row {
  @extend .flex;

  flex-direction: row;
}

.flex-column {
  @extend .flex;

  flex-direction: column;
}

.align-start {
  @extend .flex;

  align-items: flex-start;
}

.align-center {
  @extend .flex;

  align-items: center;
}

.align-end {
  @extend .flex;

  align-items: flex-end;
}

.justify-start {
  @extend .flex;

  justify-content: flex-start;
}

.justify-end {
  @extend .flex;

  justify-content: flex-end;
}

.justify-between {
  @extend .flex;

  justify-content: space-between;
}

.justify-center {
  @extend .flex;

  justify-content: center;
}

.justify-around {
  @extend .flex;

  justify-content: space-around;
}

.justify-between {
  @extend .flex;

  justify-content: space-between;
}

// 横向flex中心居中
.flex-row-center {
  @extend .flex-row;
  @extend .justify-center;
  @extend .align-center;
}

// 纵向flex中心居中
.flex-column-center {
  @extend .flex-column;
  @extend .justify-center;
  @extend .align-center;
}

@for $i from 5 through 9 {
  .fw-#{$i * 100} {
    font-weight: $i * 100;
  }
}

.text-nowrap {
  white-space: nowrap;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}

// 文本超出显示省略符
.text-ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;

  @extend .text-nowrap;
}

.rela {
  position: relative;
}

.abso {
  position: absolute;
}

.fixed {
  position: fixed;
}

// 铺满全屏
.abso-full {
  @extend .abso;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

// 绝对定位自身居中
.abso-center {
  @extend .abso;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// fixed 定居满屏
.fixed-full {
  @extend .fixed;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

// 绝对定位自身居中
.fixed-center {
  @extend .fixed;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 只取偶数
@for $i from 2 through 50 {
  @if $i % 2 == 0 {
    // 字号
    .fz-#{$i} {
      font-size: #{vw($i*1px)};
    }
  }
}

// 只取偶数
@for $i from 1 through 100 {
  @if $i % 2 == 0 {
    /* padding */
    .pd-#{$i} {
      padding: #{$i}px;
    }
    .pd-top-#{$i} {
      padding-top: #{$i}px;
    }
    .pd-right-#{$i} {
      padding-right: #{$i}px;
    }
    .pd-bottom-#{$i} {
      padding-bottom: #{$i}px;
    }
    .pd-left-#{$i} {
      padding-left: #{$i}px;
    }
    .pd-tb-#{$i} {
      padding-top: #{$i}px;
      padding-bottom: #{$i}px;
    }
    .pd-lr-#{$i} {
      padding-right: #{$i}px;
      padding-left: #{$i}px;
    }

    /* margin */
    .mg-#{$i} {
      margin: #{$i}px;
    }
    .mg-top-#{$i} {
      margin-top: #{$i}px;
    }
    .mg-right-#{$i} {
      margin-right: #{$i}px;
    }
    .mg-bottom-#{$i} {
      margin-bottom: #{$i}px;
    }
    .mg-left-#{$i} {
      margin-left: #{$i}px;
    }
    .mg-tb-#{$i} {
      margin-top: #{$i}px;
      margin-bottom: #{$i}px;
    }
    .mg-lr-#{$i} {
      margin-right: #{$i}px;
      margin-left: #{$i}px;
    }

    // width & height
    .w-#{$i} {
      width: #{$i}px;
    }
    .h-#{$i} {
      height: #{$i}px;
    }

    // radius
    .radius-#{$i} {
      border-radius: #{$i}px;
    }

    // line-height
    .lh-#{$i} {
      line-height: #{$i}px;
    }
  }
}

.w-100vw {
  width: 100vw;
}

.w-100P {
  width: 100%;
}

.h-100vh {
  height: 100vh;
}

.h-100P {
  height: 100%;
}
